<template>
  <q-btn @click="handleClick" :disable="isDebouncing" />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'my-button',

  props: {
    onClick: {
      type: Function,
      required: true,
    },
    delay: {
      type: Number,
      default: 500,
    },
  },

  setup(props) {
    const isDebouncing = ref(false);

    const handleClick = async () => {
      isDebouncing.value = true;
      try {
        await props.onClick();
        isDebouncing.value = false;
      } catch (error) {
        isDebouncing.value = false;
      }
      // setTimeout(() => {
      //   isDebouncing.value = false;
      // }, props.delay);
      // props.onClick();
    };

    return { isDebouncing, handleClick };
  },
});
</script>
